<template>
  <!-- 评教查询 -->
  <div>
    <InnerBreadcrumb v-model="indexKey" :path="breadPath" :showBack="true"/>
    <div class="edu-page-warp" v-if="indexKey === '1'">
      <condition-card @reset="reset" @search="searchList" :label-width="labelWidth" style="margin-bottom: 20px;">
        <el-row :gutter="20">
          <!-- 开课学院 -->
          <el-col :span="8">
            <el-form-item :label="$t('label.openClassCollege')">
              <DictSelect
                labelAll="请选择"
                filterable multiple collapse-tags
                v-model="queryParams.facultyList"
                :data="options.faculty"
                @change="handleChangeFaculty"
              ></DictSelect>
            </el-form-item>
          </el-col>
          <!-- 学年学期 -->
          <el-col :span="8">
            <el-form-item :label="$t('label.schoolTerm')">
              <CalendarSelect v-model="queryParams.calendarId"></CalendarSelect>
            </el-form-item>
          </el-col>
          <!-- 课程性质 -->
          <el-col :span="8">
            <el-form-item :label="$t('courseSummary.nature')" prop="courseCategory">
              <dict-select
                v-model="queryParams.natureList"
                :data="options.courseNatureList"
                :show-all="false"
                clearable
                filterable
                multiple
                collapse-tags
              />
            </el-form-item>
          </el-col>
          <!-- 授课语言 -->
          <el-col :span="8">
            <el-form-item :label="$t('授课语言')">
              <el-select v-model="queryParams.teachingLanguageList"
                clearable
                multiple collapse-tags style="width: 100%;">
                <el-option
									v-for="item in options.teachingLanguage"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 考核方式 -->
          <el-col :span="8">
            <el-form-item :label="$t('label.assessmentMode')">
              <DictSelect
                v-model="queryParams.assessmentModeList"
                :data="options.assessmentMode"
                clearable
                filterable
                multiple
                collapse-tags>
              </DictSelect>
            </el-form-item>
          </el-col>
          <!-- 课程层次 -->
          <el-col :span="8">
            <el-form-item  :label="$t('课程层次')">
              <DictSelect
                  v-model="queryParams.trainingLevelList"
                  :data="options.stuTrainingLevel"
                  clearable
                  filterable
                  multiple
                  collapse-tags
              ></DictSelect>
            </el-form-item>
          </el-col>
          <!-- 课程代码 -->
          <el-col :span="8">
            <el-form-item :label="$t('课程代码')">
              <el-input v-model="queryParams.courseCode" :placeholder="$t('请输入')"></el-input>
            </el-form-item>
          </el-col>
          <!-- 课程名称 -->
          <el-col :span="8">
            <el-form-item :label="$t('课程名称')">
              <el-input v-model="queryParams.courseName" :placeholder="$t('请输入')"></el-input>
            </el-form-item>
          </el-col>
          <!-- 职工号/姓名 -->
          <el-col :span="8">
            <el-form-item label="工号/姓名">
              <el-input v-model="queryParams.teacherCodeOrName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>

          <!-- 授课教师区分 -->
          <el-col :span="8" v-if="ifShowTeacherParam">
            <el-form-item :label="$t('授课教师区分')">
              <el-select v-model="queryParams.firstTeacherStatus" style="width: 100%;">
                <el-option
                  v-for="item in teacherTypeList"
                  :key="item.code"
                  :label="item.teacherTypeName"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>

      <!-- 表格card -->
      <el-card shadow="never">
        <div class="edu-opertion-bar">
          <div class="float-left edu-page-title">{{title}}</div>
          <div class="float-right">
            <!-- <el-button type="primary" @click="calculateScore()">{{$t('计算分数')}}</el-button> -->
            <el-button type="primary" @click="exportNoFillIn()">{{$t('未评教人员信息导出')}}</el-button>
            <el-button type="primary" @click="exportData()">{{$t('message.export')}}</el-button>
          </div>
        </div>
        <!-- 主页表格 -->
        <edu-table :url="url" ref="mainTable" :order="true" :selection="true">
          <edu-table-column :label="$t('开课学院')" prop="facultyName"></edu-table-column>
          <edu-table-column :label="$t('课程性质')" prop="natureName"></edu-table-column>
          <edu-table-column :label="$t('考核方式')" prop="assessmentModeName"></edu-table-column>
          <edu-table-column :label="$t('授课语言')" prop="teachingLanguageName"></edu-table-column>
          <edu-table-column :label="$t('课程层次')" prop="trainingLevelName"></edu-table-column>
          <edu-table-column :label="$t('课程名称')" prop="courseName"></edu-table-column>
          <edu-table-column :label="$t('课程代码')" prop="courseCode"></edu-table-column>
          <edu-table-column :label="$t('教学班代码')" prop="teachingClassId"></edu-table-column>
          <edu-table-column :label="$t('第一任课教师')" prop="firstTeacherNameCode"></edu-table-column>
          <edu-table-column :label="$t('其他任课教师')" prop="otherTeacherNameCode"></edu-table-column>
          <edu-table-column :label="$t('班级人数')" prop="studentNumber"></edu-table-column>
          <edu-table-column :label="$t('未评人数')" v-if="ifShowNotFillPeople">
            <template slot-scope="scope">
              <el-button type="text" @click="notFillInPeopleClick(scope.row)">{{scope.row.studentNoNumber}}</el-button>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('操作(平均分)')">
            <template slot-scope="scope">
              <el-button type="text" @click="checkClick(scope.row)">{{`${$t('查看')}(${scope.row.averageScore})`}}</el-button>
            </template>
          </edu-table-column>
        </edu-table>
        <edu-export-dialog :disabled="exportButton" :title="$t('message.prompt')" ref="downloadRef" :data="exportResult"></edu-export-dialog>
        <el-dialog
          title="未评人数名单详情"
          :visible.sync="notFillDialog"
           >
          <table class="classTable" cellpadding="0" cellspacing="0">
            <tr style="background: #EEF7FF;">
              <td colspan="5">姓名/学号</td>
            </tr>
            <tr v-for="(item, index) in stuNotFillList" :key="index">
              <td v-for="(item1, index1) in item" :key="index1">
                {{item1}}
              </td>
            </tr>
          </table>
        </el-dialog>
      </el-card>
    </div>
    <div v-if="indexKey === '2'">
      <CheckResult :checkData="checkData" :ifProcess="false"></CheckResult>
    </div>
  </div>
</template>
<script>
import UTILS from "common/src/utils/utils";
import baseUrl from 'common/src/api/teachingEvaluation/env'
import { queryDic } from "common/src/api/dictionary"
import courseEvaluationApi from 'common/src/api/teachingEvaluation/courseEvaluation'
import questionnaireQueryApi from 'common/src/api/teachingEvaluation/questionnaireQuery'
import SchoolCalendarApi from "common/src/api/calendars";
import CheckResult from './component/CheckResult'
import questionnaireApi from 'common/src/api/teachingEvaluation/questionnaire'
export default {
  components: {
    CheckResult
  },
  props: {
    ifShowNotFillPeople: {
      type: Boolean,
      default: true
    },
    ifShowTeacherParam: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      title: '教学评价列表',
      url: `${baseUrl}/studentManagement/object/all/getPageList`,
      labelWidth: '120px',
      exportButton: false,
      notFillDialog: false,
      exportResult: null,
      currentCalendarId: '',
      queryParams: {
        calendarId: '',
        facultyList: [],
        assessmentModeList: [],
        natureList: [],
        teachingLanguageList: [],
        courseName: '',
        firstTeacherStatus: '',
        trainingLevelList: [],
        courseCode: '',
        idList: []
      },
      indexKey: '1',
      breadPath: {
        label: this.$t('评教管理'),
        key: "1",
        children: [
          {
            key: "2",
            label: this.$t('查看')
          }
        ]
      },
      options: {
        courseNatureList: [], //课程性质
        trainingLevelList: [], //培养层次
        assessmentMode: [], // 考核方式
        stuTrainingLevel: [], //课程层次
        teachingLanguage: [], //授课语言
        faculty: []
      },
      teacherTypeList: [
        {
          teacherTypeName: '第一任课教师',
          code: '1'
        },
        {
          teacherTypeName: '其他任课教师',
          code: '0'
        }
      ],
      tableData: [],
      dataList: [],
      stuNotFillList: [],
      ifFacultyUser: false,
      facultyDisable: false
    }
  },
  created() {
    courseEvaluationApi.judgeLoginRole().then(res => {
      if (res.data) {
        this.ifFacultyUser = true
        for (let key in res.data) {
          this.queryParams.facultyList.push(key)
          this.facultyDisable = true
        }
        sessionStorage.setItem('currFacultyCode', this.queryParams.facultyList)
      } else {
        this.ifFacultyUser = false
        this.facultyDisable = false
        sessionStorage.setItem('currFacultyCode', '')
      }
    })
    this.getOptions();
  },
  mounted() {
    this.$nextTick(() => {
      this.getCurrentTermCalendar().then(resp => {
        if(resp.code === 200) {
        this.currentCalendarId = resp.data.schoolCalendar.id;
        this.queryParams.calendarId = resp.data.schoolCalendar.id;
        this.searchList()
        }
      });
     })
  },
  methods: {
    // 查询
    searchList() {
      this.$refs.mainTable.pageNum = 1;
      this.$refs.mainTable.search(this.queryParams)
    },
    // 获取当前学年学期
    async getCurrentTermCalendar(){
      return await SchoolCalendarApi.currentTermCalendar();
    },
    // 重置查询参数
    reset() {
      this.queryParams = {
        calendarId: this.currentCalendarId,
        facultyList: [],
        assessmentModeList: [],
        natureList: [],
        teachingLanguageList: [],
        courseName: '',
        trainingLevelList: [],
        courseCode: ''
      };
      if (this.facultyDisable) {
        let facultyList = sessionStorage.getItem('currFacultyCode').split(",")
        facultyList.forEach(item => [
          this.queryParams.facultyList.push(item)
        ])
      }
      this.searchList();
    },
    // 未评人数
    notFillInPeopleClick(row) {
      this.notFillDialog = true
      courseEvaluationApi.getStuNotFillInList({id: row.id}).then(res => {
        if (res.data && res.data.length > 0) {
          this.stuNotFillList = res.data
        }
      })
    },
    // 获取字典数据
    async getOptions() {
      //筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_KCXZ", "X_PYCC", "X_KSLX", "X_PYCC", "X_SKYY", "X_YX"]
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            courseNatureList: "X_KCXZ", // 课程性质
            trainingLevelList: "X_PYCC", // 培养层次
            assessmentMode: "X_KSLX", // 考核方式
            stuTrainingLevel: "X_PYCC", // 课程层次
            teachingLanguage: "X_SKYY", // 授课语言
            faculty: "X_YX"
          },
          res.data,
          this.options
        );
      });
    },
     // 导出明细
    exportNoFillIn() {
      if (this.$refs.mainTable.getData().length <= 0) {
        this.$message.error(this.$t('result.noExportData'));
        return;
      }
      const checkDatas = this.$refs.mainTable.getCheckData();
      this.queryParams.idList = checkDatas.map(item => {
        return item.id
      })
      let param = JSON.parse(JSON.stringify(this.queryParams))
      this.exportResult = null;
      this.$refs.downloadRef.open();
      this.exportButton = true;
      questionnaireQueryApi.exportNoFillIn(param).then(res =>{
        if (res.code == 200) {
          this.delayRequest(res.data.key);
        } else {
          this.queryParams.idList = []
          this.$refs.downloadRef.close();
          this.exportButton = false;
        }
      })
    },
     // 导出
    exportData() {
      if (this.$refs.mainTable.getData().length <= 0) {
        this.$message.error(this.$t('result.noExportData'));
        return;
      }
      const checkDatas = this.$refs.mainTable.getCheckData();
      this.queryParams.idList = checkDatas.map(item => {
        return item.id
      })
      let param = JSON.parse(JSON.stringify(this.queryParams))
      this.exportResult = null;
      this.$refs.downloadRef.open();
      this.exportButton = true;
      questionnaireQueryApi.exportObjectSet(param).then(res =>{
        if (res.code == 200) {
          this.delayRequest(res.data.key);
        } else {
          this.$refs.downloadRef.close();
          this.exportButton = false;
        }
      })
    },
    // 导出异步
    delayRequest(key) {
      setTimeout(() => {
        courseEvaluationApi.exportStatus(key).then(res => {
          this.exportResult = res.data;
          if (res.code == 200 && res.data.status) {
            this.exportButton = false;
            let path =
              `${baseUrl}/file/exportExcel?path=` +
              res.data.path;
            this.queryParams.idList = []
            window.location.href = path;
            this.$message.success(this.$t('result.exportSuccessfully'));
            this.$refs.downloadRef.close();
          } else {
            this.delayRequest(key);
          }
        });
      }, 3000);
    },
    // 查看
    checkClick(row) {
      let param = {
        objectConfigId: row.id,
        managementId: row.managementId
      }
      questionnaireApi.getQuestionnaireResultTeacherTeach(param).then(res => {
        if (res.code === 200) {
          this.checkData = res.data
          this.indexKey = '2'
        }
      })
    }
  },
  watch: {
    indexKey(value) {
      if (value == '1') {
        this.$router.push({
          query: {}
        })
        this.$nextTick(() => {
          this.searchList();
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.classTable{
  &.noPoint td{
    cursor: default;
    width: auto;
  }
  border: solid 1px #9c9c9c;
  border-right: 0px;
  border-bottom: 0px;
  width: 100%;
  text-align: left;
  td{
    border: solid 1px #9c9c9c;
    border-top: 0px;
    border-left: 0px;
    padding: 8px;
    width: 100px;
    cursor: pointer;
    span {
      display: inline-block;
      overflow: hidden;
    }
  }
  td.bgGray {
    background: #e0e0e0;
  }
  td.seletedClass{
    background: yellow;
  }
  td.seletedClass.preSeletedClass{
    background: #b7b7f9;
  }
  td.preSeletedClass{
    background: #89ffde;
    // animation:myfirst 3s linear 1s infinite alternate;
  }
  td.disable {
    cursor: not-allowed;
  }
}
</style>
